let socket;
window.onload = function () {

    let people = 1;

    let readyCountEl = document.getElementById('readyCount');
    let noPlayEl = document.getElementById('noPlay');
    let playEl = document.getElementById('play');
    let beforeListEl = document.getElementById('beforeList');
    let afterListBoxEl = document.getElementById('afterListBox');
    let endEl = document.getElementById('end');
    let endListBoxEl = document.getElementById('endListBox');
    let forwardListEls = []; //活动进行中 前几名列表
    let winnerListEls = []; //活动结束 获胜者列表
    let afterListEls = []; //活动进行中 后 8 位列表

    let host = window.location.origin;

    socket = io.connect(host + '/unite', { forceNew: true });

    socket.on('connect', function () {

        socket.on('setCurNum', function (data) {

            readyCountEl.innerHTML = data.num;

        })

        socket.on('start', function (data) {

            people = data.people;
            let averageNum = Math.floor(255 / people);
            let max = 8 + Number(people);
            let tmpBeforeListHtml = '';
            let tmpEndListBoxHtml = '';
            for (let i = 0; i < people; i++) {

                tmpBeforeListHtml += `<div class="playing-list">
                    <span class="play-first-num" id="forward${i}Code">0</span>号<br>
                    <span class="play-first-num" id="forward${i}Count">0</span>次<br>
                    第<span class="play-first-num" id="forward${i}People">0</span>名<br>
                    <br>
                    <div class="big-box">
                        <div class="in-box" style="background:rgb(${i%3 == 0 ? 0 : randNum(i*averageNum,(i+1)*averageNum)},${i%3 == 1 ? 0 : randNum(i*averageNum,(i+1)*averageNum)},${i%3 == 2 ? 0 : randNum(i*averageNum,(i+1)*averageNum)})" id="forward${i}Height"></div>
                    </div>
                </div>`;

                tmpEndListBoxHtml += `<div class="list-people">
                    第 <span id="winner${i}People">0</span> 名： <span id="winner${i}Code">0</span> 号 <span id="winner${i}Count"></span>次<br>
                    手机号：<span id="winner${i}Phone">0</span><br>
                </div>`;

            }

            let tmpAfterListBoxHtml = '';
            for (let i = people; i < max; i++) {
                tmpAfterListBoxHtml += `<span class="keepupCode" id="after${i}Code">0</span>号<span class="keepupCount" id="after${i}Count">0</span>次&nbsp;&nbsp;&nbsp;&nbsp;`;

            }


            beforeListEl.innerHTML = tmpBeforeListHtml;
            afterListBoxEl.innerHTML = tmpAfterListBoxHtml;
            endListBoxEl.innerHTML = tmpEndListBoxHtml;

            for (let i = 0; i < people; i++) {

                let tmpPlayElObj = {};
                tmpPlayElObj.codeEl = document.getElementById(`forward${i}Code`);
                tmpPlayElObj.countEl = document.getElementById(`forward${i}Count`);
                tmpPlayElObj.peopleEl = document.getElementById(`forward${i}People`);
                tmpPlayElObj.heightEl = document.getElementById(`forward${i}Height`);
                forwardListEls.push(tmpPlayElObj);

                let tmpEndListBoxElObj = {};
                tmpEndListBoxElObj.codeEl = document.getElementById(`winner${i}Code`);
                tmpEndListBoxElObj.countEl = document.getElementById(`winner${i}Count`);
                tmpEndListBoxElObj.peopleEl = document.getElementById(`winner${i}People`);
                tmpEndListBoxElObj.phoneEl = document.getElementById(`winner${i}Phone`);
                winnerListEls.push(tmpEndListBoxElObj);

            }

            for (let i = people; i < max; i++) {

                let tmpAfterListBoxObj = {};
                tmpAfterListBoxObj.codeEl = document.getElementById(`after${i}Code`);
                tmpAfterListBoxObj.countEl = document.getElementById(`after${i}Count`);
                afterListEls.push(tmpAfterListBoxObj);

            }

            /* 将等待画面隐藏，显示正在游戏画面，只展示前两名数据 */
            hasClass(noPlayEl, 'show') && removeClass(noPlayEl, 'show');
            addClass(noPlayEl, 'hide');
            hasClass(playEl, 'hide') && removeClass(playEl, 'hide');
            addClass(playEl, 'show');

        })

        socket.on('shake', function (data) {
            
            for (let i = 0; i < data.length; i++) {

                if (i < people) {

                    let count = data[i].count ? data[i].count : 0;
                    let code = data[i].curCode ? data[i].curCode : 0

                    forwardListEls[i].codeEl.innerHTML = code;
                    forwardListEls[i].countEl.innerHTML = count;
                    forwardListEls[i].peopleEl.innerHTML = i + 1;

                    let percent = Math.round(count / (count + 100) * 100);
                    forwardListEls[i].heightEl.style.height = percent + '%';

                } else {

                    let count = data[(i-3)].count ? data[i].count : 0;
                    let code = data[(i-3)].curCode ? data[i].curCode : 0;

                    afterListEls[(i-3)].codeEl.innerHTML = code;
                    afterListEls[(i-3)].countEl.innerHTML = count;

                }

            }

        })

        socket.on('controlsReset', function () {

            window.location.reload();

        })

        socket.on('end', function (data) {
            console.log('end data', data);
            //触发 end 事件，代表所有 separate is end
            for (let i = 0; i < data.length; i++) {

                let count = data[i].count ? data[i].count : 0;
                let code = data[i].curCode ? data[i].curCode : 0;
                let p = data[i].phone ? data[i].phone : 0;

                winnerListEls[i].codeEl.innerHTML = code;
                winnerListEls[i].countEl.innerHTML = count;
                winnerListEls[i].peopleEl.innerHTML = i + 1;
                winnerListEls[i].phoneEl.innerHTML = p;

            }

            hasClass(playEl, 'show') && removeClass(playEl, 'show');
            addClass(playEl, 'hide');
            hasClass(endEl, 'hide') && removeClass(endEl, 'hide');
            addClass(endEl, 'show');

        })

    })

    /**
     * 计算随机数
     * @param {Number} min 最小值 
     * @param {Number} max 最大值
     */
    function randNum(min,max){

        return Math.floor( Math.random() * (max - min + 1) + min ); 

    }

}

window.onbeforeunload = function () {
    socket.close();
}